<template>
  <div>
    <Card>
      <div v-if="single.length>0">
        <div class="title">单选题</div>
        <div class="question" v-for="(item,index) in single" :key="index">
          <div
            :class="item.colorflag==='0'?'answer rightAnswer':'answer wrongAnswer'"
          >正确答案：{{item.trueselect}} 分值：{{item.score}}分</div>
          <div class="questionTitle">{{index+1}}.{{item.questiondetail}}</div>
          <RadioGroup vertical style="padding-left:20px" v-model="singleAnswer[index]">
            <Radio label="A" v-if="item.a">
              <span class="questionOption">A.{{item.a}}</span>
            </Radio>
            <Radio label="B" v-if="item.b">
              <span class="questionOption">B.{{item.b}}</span>
            </Radio>
            <Radio label="C" v-if="item.c">
              <span class="questionOption">C.{{item.c}}</span>
            </Radio>
            <Radio label="D" v-if="item.d">
              <span class="questionOption">D.{{item.d}}</span>
            </Radio>
            <Radio label="E" v-if="item.e">
              <span class="questionOption">E.{{item.e}}</span>
            </Radio>
            <Radio label="F" v-if="item.f">
              <span class="questionOption">F.{{item.f}}</span>
            </Radio>
            <Radio label="G" v-if="item.g">
              <span class="questionOption">G.{{item.g}}</span>
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <div v-if="multiple.length>0">
        <div class="title">多选题</div>
        <div class="question" v-for="(item,index) in multiple" :key="index">
          <div
            :class="item.colorflag==='0'?'answer rightAnswer':'answer wrongAnswer'"
          >正确答案：{{item.trueselect}} 分值：{{item.score}}分</div>
          <div class="questionTitle">{{index+1}}.{{item.questiondetail}}</div>
          <CheckboxGroup
            style="padding-left:20px"
            v-model="multipleAnswer[index]"
            @on-change="checkChange"
          >
            <Checkbox label="A" v-if="item.a">
              <span class="questionOption">A.{{item.a}}</span>
            </Checkbox>
            <br />
            <Checkbox label="B" v-if="item.b">
              <span class="questionOption">B.{{item.b}}</span>
            </Checkbox>
            <br />
            <Checkbox label="C" v-if="item.c ">
              <span class="questionOption">C.{{item.c}}</span>
            </Checkbox>
            <br />
            <Checkbox label="D" v-if="item.d">
              <span class="questionOption">D.{{item.d}}</span>
            </Checkbox>
            <br />
            <Checkbox label="E" v-if="item.e">
              <span class="questionOption">E.{{item.e}}</span>
            </Checkbox>
            <br />
            <Checkbox label="F" v-if="item.f">
              <span class="questionOption">F.{{item.f}}</span>
            </Checkbox>
            <br />
            <Checkbox label="G" v-if="item.g">
              <span class="questionOption">G.{{item.g}}</span>
            </Checkbox>
          </CheckboxGroup>
        </div>
      </div>
      <div v-if="judge.length>0">
        <div class="title">判断题</div>
        <div class="question" v-for="(item,index) in judge" :key="index">
          <div
            :class="item.colorflag==='0'?'answer rightAnswer':'answer wrongAnswer'"
          >正确答案：{{item.trueselect}} 分值：{{item.score}}分</div>
          <div class="questionTitle">{{index+1}}.{{item.questiondetail}}</div>
          <RadioGroup vertical style="padding-left:20px" v-model="judgeAnswer[index]">
            <Radio label="A" v-if="item.a">
              <span class="questionOption">A.{{item.a}}</span>
            </Radio>
            <Radio label="B" v-if="item.b">
              <span class="questionOption">B.{{item.b}}</span>
            </Radio>
            <Radio label="C" v-if="item.c">
              <span class="questionOption">C.{{item.c}}</span>
            </Radio>
            <Radio label="D" v-if="item.d">
              <span class="questionOption">D.{{item.d}}</span>
            </Radio>
            <Radio label="E" v-if="item.e">
              <span class="questionOption">E.{{item.e}}</span>
            </Radio>
            <Radio label="F" v-if="item.f">
              <span class="questionOption">F.{{item.f}}</span>
            </Radio>
            <Radio label="G" v-if="item.g">
              <span class="questionOption">G.{{item.g}}</span>
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <div style="text-align:center">
        <Button type="primary" @click="back">返回</Button>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: this.$route.query.item,
      answer: "",
      valuea: [],
      answer1: "",
      single: [],
      multiple: [],
      judge: [],
      singleAnswer: [],
      multipleAnswer: [],
      judgeAnswer: []
    };
  },
  methods: {
    // 返回
    back() {
      this.$router.replace({
        name: "examResultDetail",
        query: {
          item: this.item
        }
      });
    },

    checkChange(value) {
      console.log(value);
    },

    // 初始化
    initial() {
      this.apiB
        .selectUerTrainAnswer({ trainid: this.item.trainid })
        .then(res => {
          if (res.code == 200 && res.data != null) {
            res.data.forEach(element => {
              if (element.questiontype === "0") {
                this.single.push(element);
                this.singleAnswer.push(element.selectanswer);
              }
              if (element.questiontype === "1") {
                this.multiple.push(element);
                let temp = [];
                if (element.selectanswer) {
                  temp = element.selectanswer.split("、");
                }
                this.multipleAnswer.push(temp);
              }
              if (element.questiontype === "2") {
                this.judge.push(element);
                this.judgeAnswer.push(element.selectanswer);
              }
            });
            console.log(this.multipleAnswer)
          }
        });
    }
  },
  mounted() {
    this.initial();
  },
  beforeDestroy() {
    this.item = null;
    this.answer = null;
    this.valuea = null;
    this.answer1 = null;
    this.single = null;
    this.multiple = null;
    this.judge = null;
    this.singleAnswer = null;
    this.multipleAnswer = null;
    this.judgeAnswer = null;
  }
};
</script>
<style scoped lang="less">
@import "./index";
</style>

<style>
.ivu-checkbox-group-item {
  margin-bottom: 10px;
}
</style>